import React, { useState } from 'react';
import { Button, Modal, Select } from 'antd';
import { connect } from 'react-redux';
import { update_order } from '../../../../store/actions/order';

const CancelModal = props => {
  const { orderId, update_order } = props;
  const cancelReasons = [
    {
      value: 1,
      label: '联系不上买家',
    },
    {
      value: 2,
      label: '买家不喜欢不想要',
    },
    {
      value: 3,
      label: '买家拍错',
    },
    {
      value: 4,
      label: '买家误拍',
    },
    {
      value: 5,
      label: '缺货无法交易',
    },
    {
      value: 6,
      label: '同城见面交易',
    },
  ];
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [cancelReason, setCancelReason] = useState('');
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    update_order({
      id: orderId,
      newState: { orderState: '已关闭', cancelReason },
    });
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const reasonChange = v => {
    setCancelReason(v.label);
  };
  return (
    <>
      <Button type='link' onClick={showModal}>
        取消订单
      </Button>
      <Modal
        title='取消订单'
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        destroyOnClose>
        <div>
          请选择取消原因：
          <Select
            style={{
              width: 180,
            }}
            allowClear
            options={cancelReasons}
            placeholder='请选择'
            placement='bottomLeft'
            labelInValue
            onChange={reasonChange}
          />
        </div>
      </Modal>
    </>
  );
};

export default connect(state => ({}), { update_order })(CancelModal);
